
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>DataEvo</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta content="width=device-width, initial-scale=1" name="viewport" />
		<meta content="Preview page of Metronic Admin Theme #1 for bootstrap inputs, input groups, custom checkboxes and radio controls and more" name="description" />
		<meta content="" name="author" />
		<!-- BEGIN GLOBAL MANDATORY STYLES -->
		<!--<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />-->
		<link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
		<link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
		<link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<link href="../assets/global/plugins/bootstrap/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
		<link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
		<!-- END GLOBAL MANDATORY STYLES -->
		<!-- BEGIN THEME GLOBAL STYLES -->
		<link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
		<link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
		<!-- END THEME GLOBAL STYLES -->
		<!-- 分页  style开始  -->
		<link href="../assets/global/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css">

		<!-- 分页  style结束 -->
		<!-- BEGIN THEME LAYOUT STYLES -->
		<!--<link href="../assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" />-->
		<!--<link href="../assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />-->
		<!--<link href="../assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />-->
		<!-- END THEME LAYOUT STYLES -->
		<!-- layui开始-->
		<link rel="stylesheet" href="../assets/global/plugins/layui/css/layui.css"/>
		<link rel="stylesheet" href="../assets/global/plugins/layui/css/modules/laydate/default/laydate.css"/>
		<!-- layui结束-->
		<link rel="stylesheet" href="../assets/custom/css/tabstyle.css"/>
		<link rel="stylesheet" href="../assets/custom/css/changeother.css"/>
		<link rel="stylesheet" href="../assets/custom/css/change_form.css"/>
	</head>
	<!-- END HEAD -->

	<body class="contentPadding">
		<!-- BEGIN CONTENT -->
		<!-- BEGIN CONTENT BODY -->
			<div class="contnet_wrap hFill">
				<div class="dialogDiv"></div>
				<!-- END PAGE HEADER-->
						<div class="left_tree hFill fl">
							<form class="form-horizontal" role="form">
                                            <div class="form">
	                                                <label class="control-label" for="growl_align">业务类型:</label>
	                                                <div class="left_tree_se">
	                                                    <select id="growl_align" class="form-control input-small input-inline">
	                                                        <option value="left">选择一</option>
	                                                        <option value="right">选择二</option>
	                                                        <option value="center">选择三</option>
	                                                    </select>
	                                                </div>
											</div>
                            </form>
<!-- ======================================   tree开始  ====================================================== -->
							<div class="portlet-body">
								<div id="tree_3" class="tree-demo jstree jstree-3 jstree-default" role="tree" aria-multiselectable="true" tabindex="0" aria-activedescendant="j3_6" aria-busy="false">
									<ul class="jstree-container-ul jstree-children" role="group">
										<li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="j3_1_anchor" aria-expanded="true" id="j3_1" class="jstree-node  jstree-open"><i class="jstree-icon jstree-ocl" role="presentation"></i>
											<a class="jstree-anchor" href="#" tabindex="-1" id="j3_1_anchor"><i class="jstree-icon jstree-themeicon fa fa-folder icon-state-warning icon-lg jstree-themeicon-custom" role="presentation"></i>Parent Node</a>
											<ul role="group" class="jstree-children">
												<li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="j3_2_anchor" id="j3_2" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i>
													<a class="jstree-anchor" href="#" tabindex="-1" id="j3_2_anchor"><i class="jstree-icon jstree-themeicon fa fa-folder icon-state-warning icon-lg jstree-themeicon-custom" role="presentation"></i>Initially selected</a>
												</li>
												<li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="j3_3_anchor" id="j3_3" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i>
													<a class="jstree-anchor" href="#" tabindex="-1" id="j3_3_anchor"><i class="jstree-icon jstree-themeicon fa fa-warning icon-state-danger jstree-themeicon-custom" role="presentation"></i>Custom Icon</a>
												</li>
												<li role="treeitem" aria-selected="true" aria-level="2" aria-labelledby="j3_4_anchor" aria-expanded="true" id="j3_4" class="jstree-node  jstree-open"><i class="jstree-icon jstree-ocl" role="presentation"></i>
													<a class="jstree-anchor jstree-clicked" href="#" tabindex="-1" id="j3_4_anchor"><i class="jstree-icon jstree-themeicon fa fa-folder icon-state-success jstree-themeicon-custom" role="presentation"></i>Initially open</a>
													<ul role="group" class="jstree-children">
														<li role="treeitem" aria-selected="false" aria-level="3" aria-labelledby="j3_5_anchor" id="j3_5" class="jstree-node  jstree-leaf jstree-last"><i class="jstree-icon jstree-ocl" role="presentation"></i>
															<a class="jstree-anchor" href="#" tabindex="-1" id="j3_5_anchor"><i class="jstree-icon jstree-themeicon fa fa-file icon-state-warning jstree-themeicon-custom" role="presentation"></i>Another node</a>
														</li>
													</ul>
												</li>
												<li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="j3_6_anchor" id="j3_6" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i>
													<a class="jstree-anchor" href="#" tabindex="-1" id="j3_6_anchor"><i class="jstree-icon jstree-themeicon fa fa-warning icon-state-warning jstree-themeicon-custom" role="presentation"></i>Another Custom Icon</a>
												</li>
												<li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="j3_7_anchor" aria-disabled="true" id="j3_7" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i>
													<a class="jstree-anchor  jstree-disabled" href="#" tabindex="-1" id="j3_7_anchor"><i class="jstree-icon jstree-themeicon fa fa-check icon-state-success jstree-themeicon-custom" role="presentation"></i>Disabled Node</a>
												</li>
												<li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="j3_8_anchor" aria-expanded="false" id="j3_8" class="jstree-node  jstree-closed jstree-last"><i class="jstree-icon jstree-ocl" role="presentation"></i>
													<a class="jstree-anchor" href="#" tabindex="-1" id="j3_8_anchor"><i class="jstree-icon jstree-themeicon fa fa-folder icon-state-danger jstree-themeicon-custom" role="presentation"></i>Sub Nodes</a>
												</li>
											</ul>
										</li>
										<li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="j3_14_anchor" id="j3_14" class="jstree-node  jstree-leaf jstree-last"><i class="jstree-icon jstree-ocl" role="presentation"></i>
											<a class="jstree-anchor" href="#" tabindex="-1" id="j3_14_anchor"><i class="jstree-icon jstree-themeicon fa fa-folder icon-state-warning icon-lg jstree-themeicon-custom" role="presentation"></i>Another Node</a>
										</li>
									</ul>
								</div>
							</div>
<!-- ======================================   tree结束  ====================================================== -->
						</div>
					<div class=" hFill right_tbale">
						<div class="portlet-body  hFill pon_relative">
							<div class="top_nav">
								<div class="left_navs ">
									<div class="btn-show">
										<button type="button" class="btn default">
											数据详情
										</button>
									</div>
									<div class="middle_navs">
										<div id="page-tab-content">	<ul id="menu-list" class="nav nav-pills ">
											<li data-toggle="tooltip" data-placement="bottom" title="案例"><a href="#portlet_tab1" data-toggle="tab">案例</a></li>
									</ul></div></div>
									<button class="tab-btn fa fa-angle-left" id="page-prev"></button>
									<button class="tab-btn  fa fa-angle-right" id="page-next"></button>
								</div>
							</div>


								<!-- nav-pills ：胶囊导航，nav-tabs：标签导航  -->
							<div class="portlet_list">
										<div id="portlet_tab1" class="tab-pane fade in active">
											<div class="tabsBottom">
												<span>选中<b>[15]</b>个对象共<b>[320]</b>个对象</span>
												<ul class="nav nav-pills">
													<li class="active">
														<a href="#tab_2_1" data-toggle="tab"> <i class="fa fa-th"></i> </a>
													</li>
													<li>
														<a href="#tab_2_2" data-toggle="tab"> <i class="fa fa-list"></i> </a>
													</li>
													<li class="dropdown">
														<a href="#tab_2_3"  data-toggle="tab">  <i class="fa fa-picture-o"></i></a>
													</li>
												</ul>
											</div>
											<div class="tab-content">
											<div class="tab-pane fade active in" id="tab_2_1">
												<div class="data_name">
													<h3>orcale数据</h3>
													<div class="data_search">
														<input type="text"/>
														<button class="btn blue-hoki">搜索</button>
													</div>
												</div>
												<div class="row tb-item" >
													<div class="fa-item col-lg-2 col-md-3 col-sm-6 col-xs-12" data-toggle="tooltip" data-placement="top" title="11111111111111111111"><span ><i class="fa fa-table"></i>11111111111111111111</span></div>
												</div>
											</div>
											<div class="tab-pane fade" id="tab_2_2">
												<p> Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table
													craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar
													helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art
													party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park. </p>
											</div>
											<div class="tab-pane fade" id="tab_2_3">
												<iframe src="../assets/custom/draw/joint.ui.html" width="100%" height="100%" frameborder="0"></iframe>
											</div>
										</div>
										</div>
										<!--<div id="portlet_tab2" class="tab-pane fade">
											数据详情
											<table class="layui-hide" id="test"></table>
										</div>
										<div id="portlet_tab3" class="tab-pane fade">
											图片
											<div class="progressBox">
												<div class="progress progress-striped active" style="max-width: 90%;margin-bottom: 0;min-width: 50%;display: inline-block; border-radius: 10px !important;">
													<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
														<span class="sr-only"> 40% Complete (success) </span>
													</div>
												</div>
												<span class="progress_per" style="font-size: 22px; color: #E87E04;"><span class="progress_num">40</span>%</span>
											</div>
										</div>-->
									</div>
						</div>
					</div>
					<!-- END SAMPLE FORM PORTLET-->
			</div>

			<!-- END CONTENT BODY -->
		<!-- END CONTENT -->

		<!--[if lt IE 9]>
<script src="../assets/global/plugins/respond.min.js"></script>
<script src="../assets/global/plugins/excanvas.min.js"></script> 
<script src="../assets/global/plugins/ie8.fix.min.js"></script> 
<![endif]-->
		<!-- BEGIN CORE PLUGINS -->
		<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
		<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
		<!--<script src="../assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>-->
		<!--<script src="../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>-->
		<!--<script src="../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>-->
		<!--<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>-->
		<!-- END CORE PLUGINS -->
		<!-- BEGIN THEME GLOBAL SCRIPTS -->
		<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
		<!-- END THEME GLOBAL SCRIPTS -->
		<!-- BEGIN THEME LAYOUT SCRIPTS -->
		<script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
		<!--<script src="../assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>-->
		<!--<script src="../assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>-->
		<!--<script src="../assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>-->
		<script src="../assets/global/plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
		<script src="../assets/global/plugins/jstree/dist/ui-tree.min.js" type="text/javascript"></script>
		<script src="../assets/global/plugins/jstree/dist/jquery-ui.js"></script>
		<script src="../assets/global/plugins/layui/layui.all.js"></script>
		<!--<script src="../js/closable-tab-div.js" type="application/javascript"></script>-->
		<script src="../assets/custom/js/tab.js"></script>
		<!-- END THEME LAYOUT SCRIPTS -->
		<script>
			$(document).ready(function() {
				$('#clickmewow').click(function() {
					$('#radio1003').attr('checked', 'checked');
				});
				$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
					// 获取已激活的标签页的名称
					var activeTab = $(e.target);
					// 获取前一个激活的标签页的名称
					activeTab.tab('show');
				});

				//点击添加标签页
				$('.left_tree .portlet-body').on('click','a',function(){
					var this_id = $(this).attr('id');
					$("#page-tab-content .nav-pills .active").removeClass("active");
					console.log($('#g'+this_id+'').length === 0);
					if($('#g'+this_id+'').length === 0){
						$('.portlet_list').append("<div id='g"+this_id+"' class='tab-pane active'>添加的"+this_id+"</div>");
						$('#g'+this_id+'').siblings().removeClass("active");
						$("#page-tab-content .nav-pills").append(" <li class='active' data-toggle='tooltip' data-placement='bottom' title='案例'><a href='#g"+this_id+"'  data-toggle=\"tab\" role=\"tab\" > <span>添加的对象添加的对象添加的对象</span> <i class='fa fa-close'></i></a></li>");
					}else {
						$("#page-tab-content .nav-pills .active").removeClass("active");
						$("a[ href='#g"+this_id+"']").parent().addClass('active');
						$('#g'+this_id+'').addClass("active").siblings().removeClass("active");
					}

					createmove();  //添加时移动tab栏
					$('.fa-close').unbind('click').click(function(){ //关闭tab栏选项时
						var this_li = $(this).parent().parent();
						var this_li_prev = $(this).parent().parent().prev();
						var portlet_id = $(this).parent().attr('href').substr(1);
						var portlet_id_obj = $('#'+portlet_id+'');
						var current_cotent = 	portlet_id_obj;
						var current_cotent_prev = portlet_id_obj.prev();

						current_cotent.remove();
						this_li.remove();
						if(this_li.hasClass('active')){
							this_li_prev.addClass('active');
							current_cotent_prev.addClass('active');
						}

						/*var nav = $("#menu-list");
						var left = parseInt(nav.css("margin-left"));
						if(left !== 0) {
							if(Math.abs(left) > this_li.width()){
								nav.animate({'margin-left':(left + this_li.width()) + "px"},animatSpeed)
							}else {
								nav.animate({'margin-left': 0 +"px"},animatSpeed)
							}
						}*/
					})
				});

				function addTab(name,url,this_id){
				//	var this_id = $(this).attr('id');
					$("#page-tab-content .nav-pills .active").removeClass("active");
					console.log($('#g'+this_id+'').length === 0);
					if($('#g'+this_id+'').length === 0){
						$('.portlet_list').append("<div id='g"+this_id+"' class='tab-pane active'><iframe src='"+url+"' width='100%' height='100%' scrolling='no'></iframe></div>");
						$('#g'+this_id+'').siblings().removeClass("active");
						$("#page-tab-content .nav-pills").append(" <li class='active' data-toggle='tooltip' data-placement='bottom' title='fdffffff'><a href='#g"+this_id+"'  data-toggle=\"tab\" role=\"tab\" > '+name+' <i class='fa fa-close'></i></a></li>");
					}else {
						$("#page-tab-content .nav-pills .active").removeClass("active");
						$("a[ href='#g"+this_id+"']").parent().addClass('active');
						$('#g'+this_id+'').addClass("active").siblings().removeClass("active");
					}

					createmove();  //添加时移动tab栏
					$('.fa-close').unbind('click').click(function(){ //关闭tab栏选项时
						var this_li = $(this).parent().parent();
						var this_li_prev = $(this).parent().parent().prev();
						var portlet_id = $(this).parent().attr('href').substr(1);
						var portlet_id_obj = $('#'+portlet_id+'');
						var current_cotent = 	portlet_id_obj;
						var current_cotent_prev = portlet_id_obj.prev();

						current_cotent.remove();
						this_li.remove();
						if(this_li.hasClass('active')){
							this_li_prev.addClass('active');
							current_cotent_prev.addClass('active');
						}
					})
				}
				//layui样式表格
				layui.use('table', function(){
					var table = layui.table;

					table.render({
						elem: '#test'
						,url:'test.json'
						,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
						,cols: [[
							{field:'id', width:80, title: 'ID', sort: true}
							,{field:'username', width:80, title: '用户名'}
							,{field:'sex', width:80, title: '性别', sort: true}
							,{field:'city', width:80, title: '城市'}
							,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
							,{field:'experience', title: '积分', sort: true}
							,{field:'score', title: '评分', sort: true}
							,{field:'classify', title: '职业'}
							,{field:'wealth', width:137, title: '财富', sort: true}
						]]
					});
				});

				//content高度的大小
				tbItemH();
				function tbItemH(){
					var right_tbale_h = $('.right_tbale>.portlet-body').height();
					var top_nav_h = $('.top_nav').outerHeight();
					var tabsBottom_h = $('.tabsBottom').outerHeight();
					var tbH = right_tbale_h - top_nav_h -tabsBottom_h -15;
					console.log(right_tbale_h+'--'+top_nav_h+'--'+tabsBottom_h+'--'+tbH+'--')
					$('.tab-content').css({'height':tbH,'overflow':'auto'});
					$('#tab_2_3').css({height:'100%','overflow':'hidden'})
				}
				$(window).resize(function(){
					tbItemH();
				});

				//右键点击items数据时事件
				$(".tb-item .fa-item").unbind("mousedown").bind("contextmenu", function (e) {
					e.preventDefault();
					var that = $(this);
					that.addClass('overF_vi').siblings().removeClass('overF_vi'); //当前过长元素显示
					that.siblings().children('.item_ul').remove();			//当前子元素ul显示
					that.addClass('bg_bl').siblings().removeClass('bg_bl');	//当前元素背景
					that.siblings().children('i').removeClass('bg_bl');		//当前其他子元素i移除背景
					that.children('i').addClass('bg_bl');					//当前子元素i背景
					var fa_item_ul = $('<ul class="vakata-context jstree-contextmenu jstree-default-contextmenu item_ul"></ul>');
					var fa_item_li = ['元数据','浏览数据','SQL查询','刷新'];
					$.each(fa_item_li,function(i,v){
						fa_item_ul.append('<li><a href="#">'+v+'</a></li>')
					});
					fa_item_ul.appendTo($(this));
					$('.item_ul').css({'display':'block','position':'absolute','z-index':'1000','background':'#fff'}).on('click','li',function(){
						if(that.width() < that.children('i').width()){
							that.css('overflow','hidden');
							that.removeClass('overF_vi');
						}
					});

				});


				//点击页面其他地方移除item_ul
				$(document).click(function(){
					$('.bg_bl').removeClass('bg_bl');
					$('.item_ul').remove();
					$('.overF_vi').removeClass('overF_vi');
				});

				//处理items文字过长
			/*	var fa_item =  $('.tb-item').children();
				$.each(fa_item,function(){
					var fa_item_w = $(this).width();
					var fa_itemI_w = $(this).children('i').width();
					if(fa_item_w < fa_itemI_w){
						$(this).css('overflow','hidden');
						$(this).hover(function(){
							$(this).css({'overflow':'visible','z-index':'2'});
						},function(){

							$(this).css({'z-index':'2','overflow':'hidden'});

							//$(this).css({'overflow':'hidden','z-index':'2'});
							//$(this).children('ul').remove();

						})
					}
				})*/

			$('a[data-toggle="tab"]').dblclick(function(){
			    if (!$('.page-sidebar-closed-hide-logo',parent.document).hasClass('page-sidebar-closed')){ //如果导航没有close就执行close
                    $('.page-sidebar-closed-hide-logo',parent.document).addClass('page-sidebar-closed');
                    $('.page-sidebar-menu',parent.document).addClass('page-sidebar-menu-closed');
				}
                $('.left_tree').toggleClass('display_none');	//切换tree和右边内容的显示
                $('.right_tbale').toggleClass('marginZero');
			})

			});

		</script>
	</body>
</html>
